<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="<?php echo IMG_PATH ?>admin/common.css?<?php echo STATIC_VER ?>">
    <link rel="stylesheet" href="<?php echo IMG_PATH ?>admin/bootstrap.min.css">
    <script src="http://static.caocaod.com/libs/jquery/jquery-2.2.3.min.js"></script>
    <script src="<?php echo IMG_PATH ?>admin/bootstrap.min.js"></script>
    <script src="<?php echo IMG_PATH ?>com/My97DatePicker/WdatePicker.js"></script>
    <script src="<?php echo IMG_PATH ?>admin/echarts.min.js"></script>
    <script>SITE_PATH='<?php echo SITE_PATH ?>';</script>
    <title>统计报表 - 千纸鹤管理平台</title>
    <style>
        .showpage{width:100%; height:30px;text-align:center; line-height: 30px;float:left;font-size:16px;margin:10px 0;}

        .showpage a , .showpage .current{ border:1px dashed #f1f4f6;font-size:14px; font-family:arial; margin:0 1px;}
        .showpage a ,  .current{ padding:2px 6px;}
        .showpage .current, .showpage a:hover{ border:1px solid blue;text-decoration:none;}
        td{padding:1px 3px;text-align:center;}
        tr:nth-of-type(3n){background:#FFFFE0;}

    </style>
</head>
<body>
<?php
echo $header;
date_default_timezone_set('PRC');
?>
<div style="background:#f1f4f6;min-height:100%;overflow:hidden;">
    <div id="body" style="width:100%;">
        <div style="font-size:18px;margin:5px 0;">当前位置：报表＞＞统计报表</div>
        <a style="font-size:18px;margin:5px 0;cursor:pointer;" id="toback"><<返回</a>

    </div>
    <div  class="form-inline col-xs-offset-2 col-xs-8"style="border:1px solid grey;border-radius:5px;margin-bottom:10px;padding:10px;">
        <div><label class="form-inline"style="font-weight:normal;">设置Y轴分割段数：</label>
        <select id="sel"class="form-control">
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option selected>9</option>
            <option>10</option>
            <option>15</option>
            <option>18</option>
            <option>20</option>
        </select></div>
        <div id="main"class="col-xs-11" style="height:400px;"></div>
    </div>

<!---->
<!--    <div  class="form-inline center col-xs-offset-2 col-xs-8" >-->
<!--        <label style="font-weight:normal;">设置Y轴分割段数：</label>-->
<!--        <select id="sel2"class="form-control">-->
<!--            <option>4</option>-->
<!--            <option>5</option>-->
<!--            <option>6</option>-->
<!--            <option>7</option>-->
<!--            <option>8</option>-->
<!--            <option selected>9</option>-->
<!--            <option>10</option>-->
<!--            <option>15</option>-->
<!--            <option>18</option>-->
<!--            <option>20</option>-->
<!--        </select>-->
<!--        <div id="main2" style="width:50%;height:400px;"></div>-->
<!--    </div>-->
<!---->
<!--    <div style="width: 600px;height:200px;"></div>-->
</div>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '订单月份统计折线图'
        },
        tooltip: {},
        legend: {
            data:['订单量'],
            align: 'right',
            right: 10
        },
        xAxis: {
            name: '月份',
            data: []
        },
        yAxis : [
            {
                type: 'value',
                name: '销量(件)',
                axisLabel: {
                    formatter: '{value}'
                },
                splitNumber:9
            }
        ],
        series: [{
            name: '订单量2',
            type: 'bar',
            data: []
        }]
    });

    // 异步加载数据
    $.get( SITE_PATH + 'admin/report/getStaticstical').done(function (data) {
        console.log(data['jdatas']['counts']);
        // 填入数据

        myChart.setOption({
            xAxis: {
                data: data['jdatas']['months']
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '销量',
                type: 'bar',
                data: data['jdatas']['counts']
            }]
        });
    });

    $('#sel').change(function(){
        myChart.setOption({
            yAxis : [
                {
                    type: 'value',
                    name: '销量(件)',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitNumber:$(this).val()
                }
            ],

        });
    })
</script>



</head>
</body>
</html>